<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    input {
        color: #ccc;
        outline:none;
    }
</style>
<body>
    <!-- 
        1）输入框获得焦点，提示内容消失，边框变色
        2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色
    -->
    <input type="text" value="" class="inp">
    <script>
        var inp = document.querySelector('.inp')
        inp.onfocus = function () {
            inp.style.border = '1px solid pink'
            inp.value = ''
        }
        inp.onblur = function(){
            inp.value = '文本框内容'
            inp.style.border = '1px solid #000'
        }
    </script>
</body>
</html>